<template>
  <el-dialog
    title="撤回"
    :model-value="dialogVisible"
    @close="handleClose"
    width="600px"
    class="custom-dialog"
    :close-on-click-modal="false"
  >
    <el-descriptions :column="1" border class="custom-descriptions">
      <el-descriptions-item label="需求编号">
        {{ formData.requirementNo || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="需求名称">
        {{ formData.requirementName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="关联合同名称">
        {{ formData.contractName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="撤回原因 *">
        <el-input
          v-model="formData.withdrawReason"
          type="textarea"
          placeholder="支持1~255个字符"
          :rows="3"
          :validate-event="false"
        />
        <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
      </el-descriptions-item>
    </el-descriptions>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="withdraw">
import { ref, reactive, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'

// 定义props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['update:modelValue', 'success', 'cancel'])

// 本地响应式状态
const dialogVisible = ref(false)
const errorMessage = ref('')
const formData = reactive({
  requirementNo: '',
  requirementName: '',
  contractName: '',
  withdrawReason: ''
})

// 监听props中的modelValue变化
watch(
  () => props.modelValue,
  (newVal) => {
    dialogVisible.value = newVal
    if (newVal && props.rowData) {
      // 当弹窗显示时，从rowData中加载数据
      formData.requirementNo = props.rowData.requirementNo || ''
      formData.requirementName = props.rowData.requirementName || ''
      formData.contractName = props.rowData.contractName || ''
      formData.withdrawReason = ''
      errorMessage.value = ''
    }
  },
  { immediate: true }
)

// 监听本地dialogVisible变化，通知父组件
watch(
  dialogVisible,
  (newVal) => {
    emit('update:modelValue', newVal)
  }
)

// 关闭弹窗
function handleClose() {
  dialogVisible.value = false
  errorMessage.value = ''
  emit('cancel')
}

// 验证表单
function validateForm() {
  errorMessage.value = ''
  
  if (!formData.withdrawReason || formData.withdrawReason.trim() === '') {
    errorMessage.value = '请输入撤回原因'
    return false
  }
  
  if (formData.withdrawReason.length < 1 || formData.withdrawReason.length > 255) {
    errorMessage.value = '长度在 1 到 255 个字符'
    return false
  }
  
  return true
}

// 提交表单
function handleSubmit() {
  if (!validateForm()) {
    return
  }
  
  // 显示确认对话框
  ElMessageBox.confirm(
    '确认将该排产撤回至计划管理？',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 提交成功，关闭弹窗并触发success事件
    emit('success', { ...formData })
    dialogVisible.value = false
    errorMessage.value = ''
  }).catch(error => {
    // 用户取消确认
    if (error !== 'cancel') {
      ElMessage.error('提交失败，请重试')
    }
  })
}
</script>

<style scoped>
/* 对话框样式 */
:deep(.custom-dialog .el-dialog__header) {
  background-color: #f5f7fa;
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 20px;
  border-top: 1px solid #ebeef5;
  background-color: #fafafa;
}

/* 自定义描述列表样式 */
.custom-descriptions {
  width: 100%;
}

:deep(.custom-descriptions .el-descriptions__item) {
  display: flex;
  align-items: flex-start;
}

:deep(.custom-descriptions .el-descriptions__label) {
  width: 140px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  background-color: #f5f7fa;
  padding: 18px 20px;
  border-right: 1px solid #ebeef5;
  min-height: 80px;
  display: flex;
  align-items: center;
}

:deep(.custom-descriptions .el-descriptions__content) {
  flex: 1;
  color: #303133;
  padding: 18px 20px;
  background-color: #ffffff;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

/* 文本域样式 */
.el-textarea__inner {
  resize: vertical;
  min-height: 80px;
}

/* 错误提示样式 */
.error-message {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
}

/* 对话框底部按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 确保单元格边框正确显示 */
:deep(.custom-descriptions .el-descriptions__cell) {
  padding: 6px !important;
  border-bottom: 1px solid #ebeef5;
}

:deep(.custom-descriptions .el-descriptions__row:last-child .el-descriptions__cell) {
  border-bottom: none;
}
</style>